<template>
  <div class="documentManage">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>文档管理</span>
      </header>
    </div>
    <div class="card_table">
      <!-- 表格头部控件 -->
      <header>
        <!-- 左侧查询控件 -->
        <span>
          <el-button @click="document_router({})" type="primary" plain size="mini">添加文档</el-button>
        </span>
        <!-- 右侧追加控件 -->
        <span>
          <!-- <el-radio v-model="table_size" label="mini">迷你</el-radio>
          <el-radio v-model="table_size" label="small">适中</el-radio>
          <el-radio v-model="table_size" label="medium">大屏</el-radio>-->
        </span>
      </header>
      <!-- 表体区域 -->
      <section
        :style="{
          maxHeight:
            table_size == 'mini'
              ? '62vh'
              : table_size == 'small'
              ? '66vh'
              : '74vh'
        }"
      >
        <!-- default-expand-all -->
        <el-table
          v-loading="table_loading"
          row-key="id"
          :size="table_size"
          border
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="name" label="文档名称"></el-table-column>
          <el-table-column prop="status" label="状态" width="160">
            <template slot-scope="scope">
              <el-button size="mini" type="text">
                <span
                  :class="
                    scope.row.status == 0
                      ? 'status_gray'
                      : scope.row.status == 1
                      ? 'status_green'
                      : 'status_orange'
                  "
                >
                  {{
                  scope.row.status == 0
                  ? "未发布"
                  : scope.row.status == 1
                  ? "已发布"
                  : "已下线"
                  }}
                </span>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="160">
            <template slot-scope="scope">
              {{
              time_change(scope.row.createdTime)
              }}
            </template>
          </el-table-column>
          <el-table-column label="修改时间" width="160">
            <template slot-scope="scope">
              {{
              time_change(scope.row.updateTime)
              }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <!-- <el-button v-if="scope.row.status==0" plain size="mini" type="text">保存</el-button> -->
              <el-button
                @click="del_table_sure(scope.row, 2)"
                v-if="scope.row.status == 1"
                plain
                size="mini"
                type="text"
              >下线</el-button>
              <el-button
                @click="del_table_sure(scope.row, 1)"
                v-if="scope.row.status == 2 || scope.row.status == 0"
                plain
                size="mini"
                type="text"
              >发布</el-button>
              <el-button
                v-if="scope.row.status != 1"
                @click="del_table_sure(scope.row, 3)"
                plain
                size="mini"
                type="text"
              >删除</el-button>
              <el-button plain size="mini" type="text" @click="document_router(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
    </div>
  </div>
</template>

<script>
import application from "@/utils/api/application.js";
export default {
  name: "documentManage",
  components: {},
  data() {
    return {
      table_loading: false, //表格加载loading
      tableData: [],
      documentList: [], // 最原始的文档 list
      table_size: "small"
    };
  },
  methods: {
    // 确认函数
    del_table_sure(obj, status) {
      let str = "";
      if (status == 3) {
        str = "此操作为逻辑删除, 是否继续?";
      }
      if (status == 2) {
        str = "下线后，该文档将对外不可见, 是否继续?";
      }
      if (status == 1) {
        str = "发布后，该文档将对外公开, 是否继续?";
      }
      this.$confirm(str, "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.del_table(obj, status);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    async del_table(obj, status) {
      let res = await application.document_submit({
        id: obj.id,
        status: status
      });
      let str = "";
      if (status == 1) {
        str = "发布成功";
      }
      if (status == 3) {
        str = "删除成功";
      }
      if (status == 2) {
        str = "下线成功";
      }

      if (res.success) {
        this.$message({
          message: str,
          type: "success"
        });
        this.query();
      } else {
        this.$message.error("操作失败");
      }
    },
    // 时间戳转换函数
    time_change(time) {
      let date = new Date(time); //获取一个时间对象
      let year = date.getFullYear(); // 获取完整的年份(4位,1970)
      let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      mon = mon < 10 ? "0" + mon : mon;
      let day = date.getDate(); // 获取日(1-31)
      day = day < 10 ? "0" + day : day;
      return year + " - " + mon + " - " + day;
    },
    // 跳转文档函数
    document_router(obj) {
      this.$store.commit("edit_obj_change", obj); //  更改共享文档对象
      // this.$router.push(`/edit_document`);
      this.$router.push({
        path:'/edit_document',
        query:{
          editObj:JSON.stringify(obj)
        }
      })
    },
    router_change(p) {
      this.$router.push(p); //  跳转页面
    },
    // 数据请求函数
    async query() {
      this.table_loading = true;
      let res = await application.document_list({});
      if (res.success) {
        this.table_loading = false;
        this.documentList = res.value.list;
        this.tableData = this.tree_data(res.value.list);
      }
    },
    // 数据结构层次化函数
    tree_data(arr, level = 1, id = 0) {
      let tree_arr = [];
      let box_arr = [];
      arr.map(_i => {
        if (_i.level > level) {
          tree_arr.push(_i);
        }
        if (_i.level == level && _i.parent == id) {
          box_arr.push(_i);
        }
      });
      box_arr.map(_i => {
        _i.children = this.tree_data(tree_arr, level + 1, _i.id);
      });
      return box_arr;
    }
  },
  async created() {
    this.query();
  },
  computed: {}
};
</script>

<style scoped lang="scss">
.documentManage::-webkit-scrollbar {
  display: none;
}
.documentManage {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 10px auto 10px;
    padding-bottom: 50px;
    position: relative;
    box-sizing: border-box;
    .tag {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 50px;
      display: flex;
      align-items: center;
    }
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sel_head {
        width: 300px;
        margin-right: 6px;
        margin-left: 0;
        transform: scale(1, 0.8);
      }
    }
    // footer {
    //   position: absolute;
    //   width: 97%;
    //   height: 50px;
    //   display: flex;
    //   justify-content: flex-end;
    //   align-items: center;
    //   bottom: 0;
    //   left: 1%;
    // }
    section {
      width: 98%;
      // max-height: calc(66vh + 10px);
      // max-height: 66vh;
      overflow-y: scroll;
      margin: 6px auto;
    }
    section::-webkit-scrollbar {
      width: 0 !important;
    }
    section {
      -ms-overflow-style: none;
    }
    section {
      overflow: -moz-scrollbars-none;
    }
  }
}
</style>
